<%--
  Created by IntelliJ IDEA.
  User: lenovo
  Date: 2017/10/26
  Time: 23:35
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<head>
    <title>Title</title>

    <script type="text/javascript">
        var temp = function(){
            var aNodes = document.getElementsByTagName("a");
            for(var i=0;i<aNodes.length;i++){
                aNodes[i].onclick = function () {
                    var xmlhttprequest =new XMLHttpRequest();
                    var method = "GET";
                    var url = this.href;
                    xmlhttprequest.open(method,url);
                    xmlhttprequest.send(null);
                    xmlhttprequest.onreadystatechange = function () {
                        if (xmlhttprequest.readyState == 4) {
                            if (xmlhttprequest.status == 200 || xmlhttprequest.status == 304) {
                                /*
                                不同点：
                                 1.结果为xml格式，所以需要用responseXML获取
                                 */
                                var result = xmlhttprequest.responseText;
                                //2.不能直接用，必须先创建节点，在把节点加到#details中
                                /*目标格式：
                                     <h2><a href="mailto:andy@clearleft.com">andy_budd</a></h2>
 <a href="http://andybudd.com">http://andybudd.com</a>
                                 */
                                var object = eval("("+result+")");
                                var name = object.person.name;
                                var website = object.person.website;
                                var email = object.person.email;
                                var aNode = document.createElement("a");

                                aNode.appendChild(document.createTextNode(name));
                                aNode.href="mailto:"+email;

                                var h2Node = document.createElement("h2");
                                h2Node.appendChild(aNode);

                                var aNode2 = document.createElement("a");
                                aNode2.appendChild(document.createTextNode(website));
                                aNode2.href = website;

                                var details = document.getElementById("details");
                                details.innerHTML = "";
                                details.appendChild(h2Node);
                                details.appendChild(aNode2);
                            }
                        }
                    }
                    return false;
                }
            }
        }
    </script>
</head>
<body onload="temp()">
<h1>people</h1>
<ul>
    <LI><a HREF="files/json.js">Andy</a></LI>
    <LI><a href="#">Richard</a></LI>
    <LI><a href="#">Jermy</a></LI>
</ul>
<div id="details"></div>
</body>
</html>
